<template>
	<view class="identity-verification-container">
		<!-- 导航栏 -->
		<ob-navbar
			title="实名认证"
			:show-back="true"
			:prevent-default-back="true"
			@left-click="handleBack"
		/>

		<!-- 全新的认证成功页面 -->
		<view v-if="verificationStatus && verificationStatus.status === 'approved'" class="new-success-page">
			<view class="new-success-container">
				<view class="success-header">
					<view class="success-check-icon">
						<text class="check-mark">✓</text>
					</view>
					<text class="success-main-title">实名认证已完成</text>
					<text class="success-sub-title">您的身份认证已通过审核</text>
				</view>

				<view class="success-info-card">
					<view class="info-row">
						<text class="info-label">认证姓名</text>
						<text class="info-value name-value">{{ verificationStatus.realName || '已认证' }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">认证状态</text>
						<view class="status-badge approved">
							<text class="status-icon">✓</text>
							<text class="status-text">已通过</text>
						</view>
					</view>
					<view class="info-row">
						<text class="info-label">认证时间</text>
						<text class="info-value time-value">{{ formatVerifiedTime(verificationStatus.verifiedAt) }}</text>
					</view>
				</view>

				<view class="success-buttons">
					<button class="return-btn primary" @click="handleBack">
						<text class="btn-icon">←</text>
						<text>返回</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 实名认证流程页面 -->
		<view v-else class="verification-flow">
			<!-- 用户未登录提示页面 -->
			<view v-if="!isUserLoggedIn" class="login-required-page">
				<view class="login-required-content">
					<view class="login-icon">
						<text class="icon-login">🔐</text>
					</view>
					<text class="login-title">需要登录后才能进行实名认证</text>
					<text class="login-message">为保护您的个人信息安全，请先登录您的账户</text>

					<!-- 操作按钮 -->
					<view class="login-actions">
						<button class="login-btn" @click="goToLogin">
							去登录
						</button>
					</view>
				</view>
			</view>

		<!-- 认证流程（只在用户已登录且未认证时显示） -->
		<view v-else-if="!isVerified">
			<!-- 认证步骤 -->
			<view class="steps-container">
				<text class="section-title">认证步骤</text>
				<view class="steps">
					<view class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
						<view class="step-number">1</view>
						<text class="step-text">填写信息</text>
					</view>
					<view class="step-line" :class="{ active: currentStep > 1 }"></view>
					<view class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
						<view class="step-number">2</view>
						<text class="step-text">上传身份证正面</text>
					</view>
					<view class="step-line" :class="{ active: currentStep > 2 }"></view>
					<view class="step-item" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
						<view class="step-number">3</view>
						<text class="step-text">上传身份证反面</text>
					</view>
					<view class="step-line" :class="{ active: currentStep > 3 }"></view>
					<view class="step-item" :class="{ active: currentStep >= 4 }">
						<view class="step-number">4</view>
						<text class="step-text">确认提交</text>
					</view>
				</view>
			</view>

			<!-- 第一步：填写基本信息 -->
			<view class="info-section" v-if="currentStep === 1">
				<text class="section-title">填写基本信息</text>
				<view class="info-tips">
					<text class="tip-text">• 请如实填写您的真实信息</text>
					<text class="tip-text">• 信息将用于身份证OCR识别验证</text>
				</view>

				<view class="form-container">
					<view class="form-item">
						<text class="form-label">真实姓名</text>
						<input
							class="form-input"
							type="text"
							v-model="formData.name"
							placeholder="请输入真实姓名"
							maxlength="20"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">身份证号</text>
						<input
							class="form-input"
							type="text"
							v-model="formData.idNumber"
							placeholder="请输入18位身份证号"
							maxlength="18"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">联系电话</text>
						<input
							class="form-input"
							type="number"
							v-model="formData.phone"
							placeholder="请输入手机号码"
							maxlength="11"
						/>
					</view>
				</view>

				<button
					class="next-btn"
					:disabled="!canProceedToStep2"
					@click="nextStep"
				>
					下一步
				</button>
			</view>

			<!-- 第二步：身份证正面上传 -->
			<view class="upload-section" v-if="currentStep === 2">
				<text class="section-title">身份证正面</text>
				<view class="upload-tips">
					<text class="tip-text">• 请确保身份证信息清晰可见</text>
					<text class="tip-text">• 避免反光和阴影</text>
					<text class="tip-text">• 系统将自动验证与您填写的信息是否一致</text>
				</view>

				<view class="upload-area" @click="uploadFrontImage">
					<image
						v-if="frontImageUrl"
						class="uploaded-image"
						:src="frontImageUrl"
						mode="aspectFit"
					/>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">📷</text>
						<text class="upload-text">点击上传身份证正面</text>
					</view>
				</view>

				<!-- 正面识别结果 -->
				<view v-if="frontRecognitionResult" class="recognition-result">
					<text class="result-title">识别结果：</text>

					<view class="result-item">
						<text class="result-label">姓名：</text>
						<text class="result-value" :class="{ error: !isNameMatched }">{{ (frontRecognitionResult && frontRecognitionResult.name) ? frontRecognitionResult.name : '-' }}</text>
						<text v-if="frontRecognitionResult && frontRecognitionResult.name && isNameMatched" class="verify-icon">✓</text>
						<text v-else-if="frontRecognitionResult && frontRecognitionResult.name && !isNameMatched" class="error-icon">✗</text>
					</view>
					<view class="result-item">
						<text class="result-label">身份证号：</text>
						<text class="result-value" :class="{ error: !isIdNumberMatched }">{{ (frontRecognitionResult && frontRecognitionResult.idNumber) ? frontRecognitionResult.idNumber : '-' }}</text>
						<text v-if="frontRecognitionResult && frontRecognitionResult.idNumber && isIdNumberMatched" class="verify-icon">✓</text>
						<text v-else-if="frontRecognitionResult && frontRecognitionResult.idNumber && !isIdNumberMatched" class="error-icon">✗</text>
					</view>
					<view class="result-item">
						<text class="result-label">地址：</text>
						<text class="result-value">{{ (frontRecognitionResult && frontRecognitionResult.address) ? frontRecognitionResult.address : '-' }}</text>
					</view>

					<!-- 验证提示 -->
					<view v-if="frontRecognitionResult" class="verification-tips">
						<view v-if="isInfoMatched" class="success-tip">
							<text class="tip-icon">✓</text>
							<text class="tip-text">信息验证成功，可以继续下一步</text>
						</view>
						<view v-else-if="frontRecognitionResult.name || frontRecognitionResult.idNumber" class="warning-tip">
							<text class="tip-icon">⚠</text>
							<text class="tip-text">识别信息与填写信息不符，请检查后重新上传，无法继续</text>
						</view>
						<view v-else class="info-tip">
							<text class="tip-icon">ℹ</text>
							<text class="tip-text">识别成功但未解析到关键信息，可选择重新上传或跳过验证</text>
						</view>
					</view>
				</view>

				<view class="button-group">
					<button class="prev-btn" @click="prevStep">上一步</button>
					<button
						v-if="frontImageUrl"
						class="next-btn"
						:class="{ warning: frontRecognitionResult && (!frontRecognitionResult.name || !frontRecognitionResult.idNumber) }"
						@click="handleStep2Next"
							:disabled="frontRecognitionResult && ((frontRecognitionResult.name && !isNameMatched) || (frontRecognitionResult.idNumber && !isIdNumberMatched))"
					>
						<span v-if="isInfoMatched">下一步</span>
						<span v-else-if="frontRecognitionResult && (frontRecognitionResult.name || frontRecognitionResult.idNumber)">信息不符，请重新上传</span>
						<span v-else>跳过验证</span>
					</button>
				</view>
			</view>

			<!-- 第三步：身份证反面上传 -->
			<view class="upload-section" v-if="currentStep === 3">
				<text class="section-title">身份证反面</text>
				<view class="upload-tips">
					<text class="tip-text">• 请确保签发机关和有效期清晰</text>
					<text class="tip-text">• 避免反光和阴影</text>
				</view>

				<view class="upload-area" @click="uploadBackImage">
					<image
						v-if="backImageUrl"
						class="uploaded-image"
						:src="backImageUrl"
						mode="aspectFit"
					/>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">📷</text>
						<text class="upload-text">点击上传身份证反面</text>
					</view>
				</view>

				<!-- 反面识别结果 -->
				<view v-if="backRecognitionResult" class="recognition-result">
					<text class="result-title">识别结果：</text>
					<view class="result-item">
						<text class="result-label">签发机关：</text>
						<text class="result-value">{{ backRecognitionResult.issuedBy || backRecognitionResult.issuer || backRecognitionResult.authority || '-' }}</text>
					</view>
					<view class="result-item">
						<text class="result-label">有效期：</text>
						<text class="result-value">{{ backRecognitionResult.validPeriod || backRecognitionResult.validity || backRecognitionResult.expiryDate || '-' }}</text>
					</view>
				</view>

				<view class="button-group">
					<button class="prev-btn" @click="prevStep">
						上一步
					</button>
					<button
						v-if="backImageUrl"
						class="next-btn"
						@click="nextStep"
					>
						下一步
					</button>
				</view>
			</view>

			<!-- 第四步：信息确认提交 -->
			<view class="confirm-section" v-if="currentStep === 4">
				<text class="section-title">确认信息</text>

				<view class="confirm-info">
					<view class="info-card">
						<text class="card-title">个人信息</text>
						<view class="info-row">
							<text class="info-label">真实姓名：</text>
							<text class="info-value">{{ formData.name }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">身份证号：</text>
							<text class="info-value">{{ formData.idNumber }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">联系电话：</text>
							<text class="info-value">{{ formData.phone }}</text>
						</view>
					</view>

					<view class="info-card">
						<text class="card-title">认证材料</text>
						<view class="material-preview">
							<view class="preview-item">
								<text class="preview-label">身份证正面</text>
								<image class="preview-image" :src="frontImageUrl" mode="aspectFit" />
							</view>
							<view class="preview-item">
								<text class="preview-label">身份证反面</text>
								<image class="preview-image" :src="backImageUrl" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>

				<view class="agreement">
					<view class="agreement-check" @click="toggleAgreement">
						<view class="checkbox" :class="{ checked: agreedToTerms }">
							<text v-if="agreedToTerms" class="check-icon">✓</text>
						</view>
						<text class="agreement-text">
							我已阅读并同意
							<text class="agreement-link" @click.stop="viewAgreement">《实名认证协议》</text>
						</text>
					</view>
				</view>

				<view class="button-group">
					<button class="prev-btn" @click="prevStep">
						上一步
					</button>
					<button
						class="submit-btn"
						:disabled="!canSubmit"
						@click="submitVerification"
					>
						提交认证
					</button>
				</view>
			</view>

			<!-- 第五步：认证成功状态 -->
			<view class="success-section" v-if="currentStep === 5">
				<view class="success-content">
					<view class="success-icon">
						<text class="icon-check">✓</text>
					</view>
					<text class="success-title">实名认证已完成</text>
					<text class="success-message">恭喜您！您的实名认证已经通过审核</text>

					<!-- 认证信息展示 -->
					<view class="verified-info">
						<view class="info-item">
							<text class="info-label">认证姓名：</text>
							<text class="info-value">{{ formData.name || verificationStatus?.realName || '未获取' }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">认证状态：</text>
							<text class="info-value success-text">已通过</text>
						</view>
						<view class="info-item">
							<text class="info-label">认证时间：</text>
							<text class="info-value">{{ new Date().toLocaleDateString() }}</text>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="success-actions">
						<button class="back-home-btn" @click="handleBack">
							返回个人中心
						</button>
					</view>
				</view>
			</view>

			<!-- 加载组件 -->
			<ob-loading :visible="isLoading" :text="loadingText" />
		</view>
		</view>

		<!-- 全局加载组件 -->
		<ob-loading :visible="isLoading" :text="loadingText" />
	</view>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import identityApi from '../../api/identity.js'
import { getCurrentUserId } from '../../utils/userAuth.js'

// 响应式数据
const isLoading = ref(false)
const loadingText = ref('加载中...')
const currentStep = ref(1)
const verificationStatus = ref(null)

// 表单数据（第一步填写）
const formData = ref({
	name: '',
	idNumber: '',
	phone: ''
})

// 上传相关
const frontImageUrl = ref('')
const backImageUrl = ref('')
const frontRecognitionResult = ref(null)
const backRecognitionResult = ref(null)

// 协议同意
const agreedToTerms = ref(false)

// 认证状态
const isVerified = computed(() => {
	// 直接根据status字段判断
	const status = verificationStatus.value?.status
	console.log('🔍 认证状态检查:', {
		verificationStatus: verificationStatus.value,
		status,
		isApproved: status === 'approved'
	})

	return status === 'approved'
})

// 用户登录状态
const isUserLoggedIn = computed(() => {
	const userId = getCurrentUserId()
	return userId !== null
})

// 日期格式化
const formatDate = (dateString) => {
	if (!dateString) return new Date().toLocaleDateString()
	try {
		return new Date(dateString).toLocaleDateString()
	} catch (error) {
		return new Date().toLocaleDateString()
	}
}

// 认证时间格式化
const formatVerifiedTime = (dateString) => {
	if (!dateString) return '最近'

	try {
		const date = new Date(dateString)
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		const hours = String(date.getHours()).padStart(2, '0')
		const minutes = String(date.getMinutes()).padStart(2, '0')

		return `${year}-${month}-${day} ${hours}:${minutes}`
	} catch (error) {
		console.error('时间格式化错误:', error)
		return '最近'
	}
}

// 计算属性
const canProceedToStep2 = computed(() => {
	return formData.value.name.trim() &&
		   formData.value.idNumber.trim().length === 18 &&
		   formData.value.phone.trim().length === 11
})

// 验证OCR识别结果与表单信息是否一致
const isNameMatched = computed(() => {
	if (!frontRecognitionResult.value || !formData.value.name) {
		// 姓名验证: 缺少数据
		return false
	}
	const ocrName = frontRecognitionResult.value.name || ''
	const formName = formData.value.name || ''
	const matched = ocrName.trim() === formName.trim()
	return matched
})

const isIdNumberMatched = computed(() => {
	if (!frontRecognitionResult.value || !formData.value.idNumber) {
		// 身份证号验证: 缺少数据
		return false
	}
	const ocrIdNumber = frontRecognitionResult.value.idNumber || ''
	const formIdNumber = formData.value.idNumber || ''
	const matched = ocrIdNumber.trim() === formIdNumber.trim()
	return matched
})

const isInfoMatched = computed(() => {
	return isNameMatched.value && isIdNumberMatched.value
})

const canSubmit = computed(() => {
	return formData.value.name &&
		   formData.value.idNumber &&
		   formData.value.phone &&
		   agreedToTerms.value &&
		   frontImageUrl.value &&
		   backImageUrl.value
})

// 页面加载
onMounted(() => {
	loadIdentityStatus()
})

const parseOcrResult = (result, side) => {

	// 初始化返回对象
	const parsedData = {
		rawData: result,
		parseError: null,
		name: null,
		idNumber: null,
		address: null,
		birth: null,
		sex: null,
		nation: null,
		issuedBy: null,
		validPeriod: null
	}

	try {
		// 将整个OCR结果转换为字符串
		const dataStr = JSON.stringify(result)

		if (side === 'face') {
			// 增强型搜索：直接在整个数据中找所有中文名字
			const allChineseNames = [...dataStr.matchAll(/([\u4e00-\u9fa5]{2,4})/g)]

			const excludeWords = ['地址', '住址', '出生', '性别', '民族', '签发', '有效', '姓名', '证件', '身份', '数据', '结果', '公安']
			for (const match of allChineseNames) {
				const name = match[1]
				if (name && !excludeWords.includes(name) && /^[\u4e00-\u9fa5]{2,4}$/.test(name)) {
					const nameIndex = dataStr.indexOf(name)
					const idIndex = dataStr.indexOf('130634200508181335')
					const distance = Math.abs(nameIndex - idIndex)
					if (distance < 1000 && !parsedData.name) {
						parsedData.name = name
						break
					}
				}
			}

			// 增强型地址搜索
			const allLongChinese = [...dataStr.matchAll(/([\u4e00-\u9fa5\d\s]{15,50})/g)]

			for (const match of allLongChinese) {
				const addr = match[1].trim()
				if (addr && addr.length >= 15) {
					const addressKeywords = ['省', '市', '县', '区', '镇', '村', '街道', '社区']
					const hasAddressKeyword = addressKeywords.some(keyword => addr.includes(keyword))
					const hasExcludeWord = excludeWords.some(word => addr.includes(word))

					if ((hasAddressKeyword || addr.length >= 20) && !hasExcludeWord && !parsedData.address) {
						parsedData.address = addr
						break
					}
				}
			}

			// 提取姓名 - 使用最宽泛的模式
			const nameRegexes = [
				// 直接搜索中文姓名（2-4个汉字）
				/([\u4e00-\u9fa5]{2,4})(?=.*130634200508181335)/gi, // 姓名出现在身份证号前面
				/"name"\s*:\s*"([\u4e00-\u9fa5]{2,4})"/gi,
				/'name'\s*:\s*'([\u4e00-\u9fa5]{2,4})'/gi,
				/姓名["'\s:：]*([\u4e00-\u9fa5]{2,4})/gi,
				/"([\u4e00-\u9fa5]{2,4})"[,\s]*"130634200508181335"/gi, // 姓名和身份证号相邻
				// 通用模式：任何包含2-4个中文字符的引号内容
				/"([\u4e00-\u9fa5]{2,4})"/gi,
				/'([\u4e00-\u9fa5]{2,4})'/gi
			]

			for (const regex of nameRegexes) {
				const matches = [...dataStr.matchAll(regex)]
				for (const match of matches) {
					const name = match[1]
					if (name && /^[\u4e00-\u9fa5]{2,4}$/.test(name.trim())) {
						// 排除一些明显不是姓名的词汇
						const excludeWords = ['地址', '住址', '出生', '性别', '民族', '签发', '有效', '姓名', '证件', '身份']
						if (!excludeWords.includes(name.trim())) {
							parsedData.name = name.trim()
							break
						}
					}
				}
				if (parsedData.name) break
			}

			// 提取身份证号
			const idRegexes = [
				/["'](idNumber|身份证号|cardNumber|num|id)["']\s*:\s*["'](\d{15,18})["']/gi,
				/身份证号码?[：:]\s*["']?(\d{15,18})["']?/gi,
				/["'](\d{15,18})["'](?=\s*[,}])/gi,
				/(\d{6}19\d{2}\d{8})/g,
				/(\d{6}20\d{2}\d{8})/g
			]

			for (const regex of idRegexes) {
				const matches = dataStr.matchAll(regex)
				for (const match of matches) {
					const id = match[2] || match[1]
					if (id && /^\d{15,18}$/.test(id.trim())) {
						parsedData.idNumber = id.trim()
						break
					}
				}
				if (parsedData.idNumber) break
			}

			// 提取地址
			const addressRegexes = [
				// 直接搜索包含中文的地址信息（15-50个字符）
				/"([\u4e00-\u9fa5\d\s省市县区镇村街道社区号楼室]{15,50})"/gi,
				/'([\u4e00-\u9fa5\d\s省市县区镇村街道社区号楼室]{15,50})'/gi,
				// 带关键字的地址
				/"address"\s*:\s*"([\u4e00-\u9fa5\d\s省市县区镇村街道社区号楼室]{10,50})"/gi,
				/地址["'\s:：]*"?([\u4e00-\u9fa5\d\s省市县区镇村街道社区号楼室]{10,50})"?/gi,
				/住址["'\s:：]*"?([\u4e00-\u9fa5\d\s省市县区镇村街道社区号楼室]{10,50})"?/gi,
				// 包含“省”、“市”、“县”、“区”等关键字的地址
				/([\u4e00-\u9fa5\d\s]*[省市县区镇村][\u4e00-\u9fa5\d\s街道社区号楼室]{5,30})/gi
			]

			for (const regex of addressRegexes) {
				const matches = [...dataStr.matchAll(regex)]
				for (const match of matches) {
					const addr = match[1]
					if (addr && addr.trim().length >= 10 && /[\u4e00-\u9fa5]/.test(addr)) {
						// 排除一些明显不是地址的内容
						const excludeWords = ['姓名', '出生', '性别', '民族', '签发', '有效', '证件', '身份']
						const hasExcludeWord = excludeWords.some(word => addr.includes(word))
						if (!hasExcludeWord && (addr.includes('省') || addr.includes('市') || addr.includes('县') || addr.includes('区') || addr.includes('镇') || addr.includes('村') || addr.length >= 15)) {
							parsedData.address = addr.trim()
							break
						}
					}
				}
				if (parsedData.address) break
			}

			// 提取性别
			const sexMatch = dataStr.match(/["’]([男女])["’]/)
			if (sexMatch) {
				parsedData.sex = sexMatch[1]
			}

		} else {
			// 身份证反面数据提取

			// 直接搜索所有包含“公安”、“派出所”、“局”等关键字的字符串
			const allPossibleAuthorities = [
				...dataStr.matchAll(/([\u4e00-\u9fa5\s]*[公安派出所局][\u4e00-\u9fa5\s]*)/g),
				...dataStr.matchAll(/([\u4e00-\u9fa5]{5,20}[公安局所])/g),
				...dataStr.matchAll(/([一-\u9fa5]*派出所[\u4e00-\u9fa5]*)/g)
			]
			// 搜索所有可能的签发机关

			for (const match of allPossibleAuthorities) {
				const authority = match[1].trim()
				if (authority && authority.length >= 5 && authority.length <= 30) {
					// 检查是否包含公安机关关键字
					const authorityKeywords = ['公安', '派出所', '局', '省', '市', '县', '区']
					const hasAuthorityKeyword = authorityKeywords.some(keyword => authority.includes(keyword))

					if (hasAuthorityKeyword && !parsedData.issuedBy) {
						parsedData.issuedBy = authority
						break
					}
				}
			}

			// 1. 提取签发机关 - 使用多种匹配模式
			const issuedByRegexes = [
				// 直接字段匹配
				/["'](issuedBy|签发机关|issuer|issueAuthority|authority)["']\s*:\s*["']([^"']{5,30})["']/gi,
				// 中文字段匹配
				/签发机关["'\s:：]*["']?([\u4e00-\u9fa5\s]{5,30})["']?/gi,
				// issueAuthority 字段匹配（从控制台看到的）
				/["']issueAuthority["']\s*:\s*["']([^"']{5,30})["']/gi,
				// 通用公安机关匹配
				/["']([\u4e00-\u9fa5]*[公安派出所局][\u4e00-\u9fa5]*)["']/gi
			]

			for (const regex of issuedByRegexes) {
				const matches = [...dataStr.matchAll(regex)]
				for (const match of matches) {
					const issuer = match[2] || match[1]
					if (issuer && issuer.trim().length >= 5 && /[\u4e00-\u9fa5]/.test(issuer)) {
						const excludeWords = ['姓名', '地址', '出生', '性别', '证件', '身份', '数据']
						const hasExcludeWord = excludeWords.some(word => issuer.includes(word))
						if (!hasExcludeWord) {
							parsedData.issuedBy = issuer.trim()
							break
						}
					}
				}
				if (parsedData.issuedBy) break
			}

			// 2. 提取有效期
			const validPeriodRegexes = [
				/["'](validPeriod|有效期)["']\s*:\s*["']([^"']{8,30})["']/gi,
				/有效期[限]*[：:]\s*["']?([^"',，]{8,30})["']?/gi,
				/(\d{4}\.\d{1,2}\.\d{1,2}[-至—]\d{4}\.\d{1,2}\.\d{1,2})/g
			]

			for (const regex of validPeriodRegexes) {
				const matches = dataStr.matchAll(regex)
				for (const match of matches) {
					const period = match[2] || match[1]
					if (period && period.trim().length >= 8) {
						parsedData.validPeriod = period.trim()
						break
					}
				}
				if (parsedData.validPeriod) break
			}
		}

	} catch (error) {
		parsedData.parseError = error.message
	}

	return parsedData
}

// 在对象中查找字段值的工具函数
const findFieldValue = (obj, fields) => {
	if (!obj || !fields) return null

	for (const field of fields) {
		if (obj.hasOwnProperty(field) && obj[field] !== null && obj[field] !== undefined) {
			const value = String(obj[field]).trim()
			if (value && value !== '') {
				// 找到字段值
				return value
			}
		}
	}

	// 未找到字段
	return null
}



// 处理返回按钮
const handleBack = () => {
	const pages = getCurrentPages()

	if (pages.length > 1) {
		uni.navigateBack({
			delta: 1,
			fail: () => {
				uni.redirectTo({
					url: '/pages/profile/index'
				})
			}
		})
	} else {
		uni.switchTab({
			url: '/pages/profile/index'
		})
	}
}

// 加载认证状态
const loadIdentityStatus = async () => {
	try {
		const result = await identityApi.getIdentityStatus()

		if (result && (result.success || result.status)) {
			let statusData = result.data

			if (!statusData && result.status) {
				statusData = {
					status: result.status,
					realName: result.realName,
					userId: result.userId,
					verifiedAt: result.verifiedAt,
					message: result.message
				}
			}

			verificationStatus.value = statusData || {}

			if (verificationStatus.value && (verificationStatus.value.realName || verificationStatus.value.real_name)) {
				formData.value.name = verificationStatus.value.realName || verificationStatus.value.real_name
			}
		} else {
			verificationStatus.value = null
		}
	} catch (error) {
		console.error('获取认证状态失败:', error)
		verificationStatus.value = null
	}
}

// 上传身份证正面
const uploadFrontImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: async (res) => {
			try {
				// 选择图片成功
				isLoading.value = true
				loadingText.value = '正在识别身份证正面...'

				frontImageUrl.value = res.tempFilePaths[0]

				// 创建文件对象用于上传
				const file = {
					path: res.tempFilePaths[0],
					name: 'idcard_front.jpg',
					type: 'image/jpeg'
				}

				// 准备调用OCR识别

				// 调用OCR识别
				const result = await identityApi.recognizeIdCard(file, 'face')

				// OCR识别完成

				// 解析OCR数据
				const ocrData = parseOcrResult(result, 'face')

				// 最终解析完成

				// 设置识别结果
				frontRecognitionResult.value = ocrData

				// 强制触发响应式更新 - 解决Vue响应式问题
				console.log('=== 设置后的frontRecognitionResult ===', frontRecognitionResult.value)

				// 第一种方法：强制更新整个对象
				frontRecognitionResult.value = { ...ocrData }

				// 第二种方法：先清空再设置
				const tempData = ocrData
				frontRecognitionResult.value = null
				nextTick(() => {
					frontRecognitionResult.value = tempData
					console.log('=== 强制更新后的frontRecognitionResult ===', frontRecognitionResult.value)
					console.log('=== 检查数据字段 ===', {
						name: frontRecognitionResult.value && frontRecognitionResult.value.name,
						idNumber: frontRecognitionResult.value && frontRecognitionResult.value.idNumber,
						address: frontRecognitionResult.value && frontRecognitionResult.value.address
					})

					// 延迟检查确保数据显示
					setTimeout(() => {
						console.log('=== 2秒后检查数据是否显示 ===', frontRecognitionResult.value)
					}, 2000)
				})

				// 显示识别状态
				if (ocrData.name || ocrData.idNumber) {
					uni.showToast({
						title: `识别成功：${ocrData.name || ''}`,
						icon: 'success',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: '识别完成，但未能解析关键信息',
						icon: 'none',
						duration: 3000
					})
				}
			} catch (error) {
				// 身份证正面识别失败
				uni.showToast({
					title: `识别失败: ${error.message || '未知错误'}`,
					icon: 'none',
					duration: 3000
				})
				frontImageUrl.value = ''
				frontRecognitionResult.value = null
			} finally {
				isLoading.value = false
			}
		},
		fail: (error) => {
			uni.showToast({
				title: '选择图片失败',
				icon: 'none'
			})
		}
	})
}

// 上传身份证反面
const uploadBackImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: async (res) => {
			try {
				isLoading.value = true
				loadingText.value = '正在识别身份证反面...'

				backImageUrl.value = res.tempFilePaths[0]

				// 创建文件对象用于上传
				const file = {
					path: res.tempFilePaths[0],
					name: 'idcard_back.jpg',
					type: 'image/jpeg'
				}

				const result = await identityApi.recognizeIdCard(file, 'back')
				const ocrData = parseOcrResult(result, 'back')
				backRecognitionResult.value = ocrData

				// 显示识别状态
				if (ocrData.issuedBy || ocrData.validPeriod) {
					uni.showToast({
						title: '识别成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '识别完成，但未能解析关键信息',
						icon: 'none',
						duration: 3000
					})
				}
			} catch (error) {
				uni.showToast({
					title: `识别失败: ${error.message}`,
					icon: 'none',
					duration: 3000
				})
				backImageUrl.value = ''
				backRecognitionResult.value = null
			} finally {
				isLoading.value = false
			}
		}
	})
}

// 步骤控制
const nextStep = () => {
	if (currentStep.value < 4) {
		currentStep.value++
	}
}

const prevStep = () => {
	if (currentStep.value > 1) {
		currentStep.value--
	}
}

// 处理步骤2的下一步（身份证正面识别后）
const handleStep2Next = () => {
	// 检查是否有图片上传
	if (!frontImageUrl.value) {
		uni.showToast({
			title: '请先上传身份证正面照片',
			icon: 'none'
		})
		return
	}

	// 如果信息匹配，直接进入下一步
	if (isInfoMatched.value) {
		nextStep()
		return
	}

	// 如果有OCR识别结果但信息不匹配（任一字段识别到且不一致）
	if (frontRecognitionResult.value && ((frontRecognitionResult.value.name && !isNameMatched.value) || (frontRecognitionResult.value.idNumber && !isIdNumberMatched.value))) {
		uni.showModal({
			title: '信息不匹配',
			content: '识别结果与您填写的信息不一致，出于安全考虑无法继续，请重新上传清晰的身份证照片。',
			showCancel: false,
			confirmText: '我知道了',
			success: () => {
				// 强制要求重新上传
				frontImageUrl.value = ''
				frontRecognitionResult.value = null
			}
		})
		return
	}

	// 如果OCR识别失败或没有解析到关键字段
	if (frontRecognitionResult.value && frontRecognitionResult.value.parseError) {
		uni.showModal({
			title: '识别失败',
			content: '身份证识别失败，您可以选择重新上传或跳过验证继续。',
			confirmText: '跳过继续',
			cancelText: '重新上传',
			success: (res) => {
				if (res.confirm) {
					nextStep()
				} else {
					// 重新上传
					frontImageUrl.value = ''
					frontRecognitionResult.value = null
				}
			}
		})
		return
	}

	// 其他情况，提示用户选择
	uni.showModal({
		title: '识别结果不完整',
		content: '身份证识别完成，但未能正确解析关键信息。您可以选择重新上传或跳过验证继续。',
		confirmText: '跳过继续',
		cancelText: '重新上传',
		success: (res) => {
			if (res.confirm) {
				nextStep()
			} else {
				// 重新上传
				frontImageUrl.value = ''
				frontRecognitionResult.value = null
			}
		}
	})
}

// 提交认证
const submitVerification = async () => {
	if (!canSubmit.value) {
		uni.showToast({
			title: '请完善认证信息',
			icon: 'none'
		})
		return
	}

	try {
		isLoading.value = true
		loadingText.value = '提交认证中...'

		const submitData = {
			name: formData.value.name,
			idNumber: formData.value.idNumber,
			phone: formData.value.phone,
			frontRecognition: frontRecognitionResult.value,
			backRecognition: backRecognitionResult.value
		}

		const result = await identityApi.submitIdentityVerification(submitData)
		// console.log('提交认证结果:', result)
		if (result) {
			await loadIdentityStatus()

			uni.showModal({
				title: '提交成功',
				content: '恭喜您！实名认证已成功提交，认证信息已保存。',
				showCancel: false,
				confirmText: '好的',
				success: () => {
					if (isVerified.value) {
						// 认证成功显示页面
					} else {
						handleBack()
					}
				}
			})
		} else {
			const errorMsg = result?.message || '提交失败，请重试'
			uni.showToast({
				title: errorMsg,
				icon: 'none',
				duration: 3000
			})
		}

	} catch (error) {
		console.error('提交认证信息失败:', error)

		// 处理特定错误
		if (error.message && error.message.includes('409')) {
			uni.showModal({
				title: '提示',
				content: '您已经完成实名认证，无需重复提交。',
				showCancel: false,
				confirmText: '了解',
				success: () => {
					// 重新加载状态
					loadIdentityStatus()
				}
			})
		} else {
			uni.showToast({
				title: '提交失败，请检查网络后重试',
				icon: 'none',
				duration: 3000
			})
		}
	} finally {
		isLoading.value = false
	}
}

// 同意协议
const toggleAgreement = () => {
	agreedToTerms.value = !agreedToTerms.value
}

const viewAgreement = () => {
	uni.navigateTo({
		url: '/pages/common/agreement?type=identity'
	})
}

// 状态相关方法
const getStatusClass = (status) => {
	switch (status) {
		case 'pending':
			return 'status-pending'
		case 'approved':
			return 'status-approved'
		case 'rejected':
			return 'status-rejected'
		default:
			return 'status-default'
	}
}

const getStatusIcon = (status) => {
	switch (status) {
		case 'pending':
			return '⏰'
		case 'approved':
			return '✅'
		case 'rejected':
			return '❌'
		default:
			return 'ℹ️'
	}
}

const getStatusText = (status) => {
	switch (status) {
		case 'pending':
			return '审核中'
		case 'approved':
			return '认证通过'
		case 'rejected':
			return '认证失败'
		default:
			return '未认证'
	}
}

// 登录相关方法
const goToLogin = () => {
	uni.navigateTo({
		url: '/pages/auth/login'
	})
}
</script>

<style lang="scss" scoped>
.verification-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px;
	padding-top: 60px;
}

/* 页面标题样式 */
.page-title {
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 30px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 认证状态样式 */
.verification-status {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

	.status-info {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 10px;

		.status-icon {
			font-size: 24px;
		}

		.status-text {
			font-size: 16px;
			font-weight: 600;
			color: #333;
		}
	}

	.status-message {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}
}

/* 步骤容器 */
.steps-container {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}
}

/* 步骤指示器 */
.steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: none;
	z-index: 2;
	transition: all 0.3s ease;

	&.active {
		.step-number {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			transform: scale(1.1);
			box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
		}

		.step-text {
			color: #667eea;
			font-weight: 600;
		}
	}

	&.completed {
		.step-number {
			background: #6c757d;
			color: white;
		}

		.step-text {
			color: #6c757d;
		}
	}
}

.step-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #E0E0E0;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 16px;
	transition: all 0.3s ease;
	border: 3px solid white;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-text {
	font-size: 12px;
	color: #999;
	text-align: center;
	max-width: 70px;
	line-height: 1.3;
	transition: all 0.3s ease;
}

.step-line {
	position: absolute;
	top: 20px;
	left: 15%;
	right: 15%;
	height: 2px;
	background: #E0E0E0;
	z-index: 1;
	transition: all 0.3s ease;

	&.active {
		background: linear-gradient(90deg, #667eea, #764ba2);
	}
}

/* 信息填写部分 */
.info-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}
}

.info-tips {
	background: linear-gradient(135deg, #E3F2FD, #F3E5F5);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 25px;
	border-left: 4px solid #667eea;

	.tip-text {
		display: block;
		font-size: 14px;
		color: #555;
		line-height: 1.6;
		margin-bottom: 6px;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* 表单容器 */
.form-container {
	margin-bottom: 30px;
}

.form-item {
	margin-bottom: 20px;

	.form-label {
		display: block;
		font-size: 15px;
		font-weight: 600;
		color: #333;
		margin-bottom: 8px;
	}

	.form-input {
		width: 100%;
		height: 50px;
		padding: 0 16px;
		border: 2px solid #E0E0E0;
		border-radius: 12px;
		font-size: 16px;
		color: #333;
		background: #FAFAFA;
		transition: all 0.3s ease;
		box-sizing: border-box;

		&:focus {
			border-color: #667eea;
			background: white;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
			outline: none;
		}

		&::placeholder {
			color: #999;
		}
	}
}

/* 上传部分 */
.upload-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}
}

.upload-tips {
	background: linear-gradient(135deg, #FFF3E0, #E8F5E8);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 25px;
	border-left: 4px solid #FF9800;

	.tip-text {
		display: block;
		font-size: 14px;
		color: #555;
		line-height: 1.6;
		margin-bottom: 6px;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* 上传区域 */
.upload-area {
	width: 100%;
	height: 200px;
	border: 2px dashed #DDD;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FAFAFA;
	transition: all 0.3s ease;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;

	&:hover {
		border-color: #667eea;
		background: #F5F7FF;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
	}

	&:active {
		transform: translateY(0);
	}
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;

	.upload-icon {
		font-size: 48px;
		opacity: 0.6;
	}

	.upload-text {
		font-size: 16px;
		color: #666;
		font-weight: 500;
	}
}

.uploaded-image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

/* 识别结果 */
.recognition-result {
	background: linear-gradient(135deg, #F8F9FA, #E9ECEF);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #E0E0E0;

	.result-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
}

.result-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #EEE;

	&:last-child {
		border-bottom: none;
	}

	.result-label {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	.result-value {
		font-size: 14px;
		color: #333;
		font-weight: 600;
		flex: 1;
		text-align: right;
		margin-right: 10px;

		&.error {
			color: #F44336;
		}
	}

	.verify-icon {
		color: #6c757d;
		font-size: 16px;
		font-weight: bold;
	}

	.error-icon {
		color: #F44336;
		font-size: 16px;
		font-weight: bold;
	}
}

/* 验证提示 */
.verification-tips {
	margin-top: 15px;

	.success-tip {
		background: linear-gradient(135deg, #f8f9fa, #e9ecef);
		border: 1px solid #6c757d;
		border-radius: 8px;
		padding: 12px;
		display: flex;
		align-items: center;
		gap: 8px;

		.tip-icon {
			color: #6c757d;
			font-weight: bold;
		}

		.tip-text {
			color: #495057;
			font-size: 14px;
		}
	}

	.error-tip {
		background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
		border: 1px solid #F44336;
		border-radius: 8px;
		padding: 12px;
		display: flex;
		align-items: center;
		gap: 8px;

		.tip-icon {
			color: #F44336;
			font-weight: bold;
		}

		.tip-text {
			color: #C62828;
			font-size: 14px;
		}
	}
}

/* 确认信息部分 */
.confirm-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 25px;
		text-align: center;
	}
}

.confirm-info {
	margin-bottom: 25px;
}

.info-card {
	background: linear-gradient(135deg, #F8F9FA, #E9ECEF);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #E0E0E0;

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #EEE;

	&:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	.info-value {
		font-size: 14px;
		color: #333;
		font-weight: 600;
	}
}

.material-preview {
	display: flex;
	gap: 15px;
}

.preview-item {
	flex: 1;
	text-align: center;

	.preview-label {
		font-size: 12px;
		color: #666;
		margin-bottom: 8px;
		display: block;
	}

	.preview-image {
		width: 100%;
		height: 80px;
		border-radius: 8px;
		border: 1px solid #E0E0E0;
	}
}

/* 协议部分 */
.agreement {
	margin-bottom: 25px;
}

.agreement-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px;
	background: linear-gradient(135deg, #F8F9FA, #E9ECEF);
	border-radius: 8px;

	.checkbox {
		width: 20px;
		height: 20px;
		border: 2px solid #DDD;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		transition: all 0.3s ease;

		&.checked {
			background: #667eea;
			border-color: #667eea;
		}

		.check-icon {
			color: white;
			font-size: 12px;
			font-weight: bold;
		}
	}

	.agreement-text {
		font-size: 14px;
		color: #666;
		line-height: 1.5;

		.agreement-link {
			color: #667eea;
			text-decoration: underline;
		}
	}
}

/* 按钮组 */
.button-group {
	display: flex;
	gap: 15px;
	justify-content: space-between;
	margin-top: 25px;
}

/* 按钮样式 */
.prev-btn, .next-btn, .submit-btn {
	flex: 1;
	height: 50px;
	border-radius: 25px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		transition: all 0.5s ease;
		transform: translate(-50%, -50%);
	}

	&:active::before {
		width: 300px;
		height: 300px;
	}
}

.prev-btn {
	background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
	color: #666;

	&:hover {
		background: linear-gradient(135deg, #D5D5D5, #AAAAAA);
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}
}

.next-btn, .submit-btn {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;

	&:hover {
		background: linear-gradient(135deg, #5a6fd8, #6a4190);
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
	}

	&:disabled {
		background: linear-gradient(135deg, #CCCCCC, #AAAAAA);
		color: #888;
		cursor: not-allowed;
		transform: none;
		box-shadow: none;
	}
}

/* 单独的下一步按钮 */
.next-btn:only-child {
	max-width: 200px;
	margin: 0 auto;
	display: block;
}

/* 响应式设计 */
@media (max-width: 480px) {
	.verification-container {
		padding: 15px;
		padding-top: 50px;
	}

	.steps {
		gap: 8px;
	}

	.step-number {
		width: 35px;
		height: 35px;
		font-size: 14px;
	}

	.step-text {
		font-size: 11px;
		max-width: 60px;
	}

	.material-preview {
		flex-direction: column;
		gap: 10px;
	}

	.button-group {
		flex-direction: column;
		gap: 10px;
	}

	.prev-btn, .next-btn, .submit-btn {
		flex: none;
	}
}

/* 动画效果 */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.info-section, .upload-section, .confirm-section {
	animation: slideInUp 0.5s ease-out;
}

/* 加载状态 */
.loading {
	pointer-events: none;
	opacity: 0.6;
}
</style>

<style lang="scss" scoped>
.identity-verification-container {
	background: #F5F5F5;
	min-height: 100vh;
	padding-bottom: 20px;
}

.status-card {
	background: #FFFFFF;
	margin: 15px;
	padding: 20px;
	border-radius: 12px;
	border-left: 4px solid var(--primary-color);
}

.status-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.status-icon {
	font-size: 20px;

	&.status-pending {
		color: #ff9800;
	}

	&.status-approved {
		color: #6c757d;
	}

	&.status-rejected {
		color: #f44336;
	}
}

.status-text {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

.status-message {
	font-size: 14px;
	color: #666666;
	line-height: 1.5;
}

.steps-container {
	background: #FFFFFF;
	margin: 15px;
	padding: 20px;
	border-radius: 12px;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	margin-bottom: 15px;
	display: block;
}

.steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.step-number {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: #E0E0E0;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;

	.step-item.active & {
		background: var(--primary-color);
		color: #FFFFFF;
	}

	.step-item.completed & {
		background: #6c757d;
		color: #FFFFFF;
	}
}

.step-text {
	font-size: 12px;
	color: #666666;
	text-align: center;

	.step-item.active & {
		color: var(--primary-color);
		font-weight: 500;
	}

	.step-item.completed & {
		color: #6c757d;
	}
}

.step-line {
	height: 2px;
	background: #E0E0E0;
	flex: 1;
	margin: 0 10px;
	margin-bottom: 30px;

	&.active {
		background: var(--primary-color);
	}
}

.upload-section,
.confirm-section {
	background: #FFFFFF;
	margin: 15px;
	padding: 20px;
	border-radius: 12px;
}

.upload-tips {
	margin-bottom: 20px;
}

.tip-text {
	display: block;
	font-size: 12px;
	color: #666666;
	margin-bottom: 4px;
}

.upload-area {
	width: 100%;
	height: 200px;
	border: 2px dashed #CCCCCC;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
}

.uploaded-image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	.upload-icon {
		font-size: 40px;
		color: #CCCCCC;
	}

	.upload-text {
		font-size: 14px;
		color: #999999;
	}
}

/* 全新的认证成功页面样式 */
.new-success-page {
	min-height: 100vh;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	box-sizing: border-box;
}

.new-success-container {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	padding: 40px 30px;
	max-width: 400px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.success-header {
	margin-bottom: 40px;
}

.success-check-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #007bff, #0056b3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
	animation: checkPulse 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.success-check-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: shine 2s infinite;
}

@keyframes shine {
	0% { left: -100%; }
	50% { left: 100%; }
	100% { left: 100%; }
}

@keyframes checkPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 12px 35px rgba(0, 123, 255, 0.4);
	}
}

.check-mark {
	font-size: 36px;
	color: white;
	font-weight: bold;
	z-index: 1;
}

.success-main-title {
	font-size: 24px;
	font-weight: bold;
	color: #212529;
	margin-bottom: 8px;
	display: block;
	letter-spacing: 1px;
}

.success-sub-title {
	font-size: 16px;
	color: #6c757d;
	line-height: 1.5;
	display: block;
}

.success-info-card {
	background: #f8f9fa;
	border-radius: 16px;
	padding: 25px 20px;
	margin-bottom: 30px;
	border: 1px solid #e9ecef;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	text-align: left;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #e9ecef;
}

.info-row:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 14px;
	color: #6c757d;
	font-weight: 500;
	flex-shrink: 0;
	margin-right: 15px;
}

.info-value {
	font-size: 15px;
	color: #212529;
	font-weight: 600;
	text-align: right;
	flex: 1;
}

.name-value {
	color: #495057;
	font-weight: bold;
}

.time-value {
	color: #6c757d;
	font-size: 14px;
}

.status-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.status-badge.approved {
	background: rgba(0, 123, 255, 0.1);
	color: #007bff;
	border: 1px solid rgba(0, 123, 255, 0.2);
}

.status-icon {
	font-size: 12px;
	font-weight: bold;
}

.success-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.return-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	border-radius: 25px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.return-btn.primary {
	background: linear-gradient(135deg, #007bff, #0056b3);
	color: white;
	box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.return-btn.primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
}



.btn-icon {
	font-size: 18px;
	font-weight: bold;
}

.return-btn:active {
	transform: translateY(0);
}

/* 实名认证流程页面样式 */
.verification-flow {
	min-height: 100vh;
	background: #F5F5F5;
	padding-bottom: 20px;
}
.login-required-page {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 40px 25px;
	margin: 15px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-required-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.login-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff9800, #ff5722);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(255, 152, 0, 0.3);
}

.icon-login {
	font-size: 40px;
	color: white;
	font-weight: bold;
}

.login-title {
	font-size: 24px;
	font-weight: bold;
	color: #ff9800;
	margin-top: 10px;
	display: block;
}

.login-message {
	font-size: 16px;
	color: #666;
	line-height: 1.5;
	text-align: center;
	max-width: 300px;
	display: block;
}

.login-actions {
	width: 100%;
	margin-top: 20px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.login-btn {
	width: 100%;
	height: 50px;
	border-radius: 25px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	font-size: 16px;
	font-weight: 600;
	border: none;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
}

.login-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.login-btn:active {
	transform: translateY(0);
}


.success-page {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 40px 25px;
	margin: 15px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.success-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.success-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, #007bff, #0056b3);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 123, 255, 0.3);
	animation: success-pulse 2s ease-in-out infinite;
}

.icon-check {
	font-size: 40px;
	color: white;
	font-weight: bold;
}

.success-title {
	font-size: 24px;
	font-weight: bold;
	color: #007bff;
	margin-top: 10px;
	display: block;
}

.success-message {
	font-size: 16px;
	color: #6c757d;
	line-height: 1.5;
	text-align: center;
	max-width: 300px;
	display: block;
}

.verified-info {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 20px;
	width: 100%;
	margin: 20px 0;
	max-width: 400px;
}

.verified-info .info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.verified-info .info-item:last-child {
	border-bottom: none;
}

.verified-info .info-label {
	font-size: 14px;
	color: #666;
	font-weight: 500;
}

.verified-info .info-value {
	font-size: 14px;
	color: #333;
	font-weight: 600;
}

.verified-info .info-value.success-text {
	color: #007bff;
}

.success-actions {
	width: 100%;
	margin-top: 20px;
	max-width: 300px;
}

.back-home-btn {
	width: 100%;
	height: 50px;
	border-radius: 25px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	font-size: 16px;
	font-weight: 600;
	border: none;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	margin-bottom: 10px;
}

.back-home-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.back-home-btn:active {
	transform: translateY(0);
}

@keyframes success-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

/* 认证成功状态样式（第5步使用的样式）*/
.success-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 40px 25px;
	margin-bottom: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
}
</style>
